<script setup>
import { NIcon } from 'naive-ui'
import { ArrowForward } from '@vicons/ionicons5'

import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation, Pagination, Scrollbar } from 'swiper/modules'

import 'swiper/css'

// 仅限核心 Swiper 样式
import 'swiper/css/navigation'

const customerList = ref([
  {
    title: '中国宝武：智能化宿舍管理，提升员工满意度',
    desc: '在寓盟团队的支持下，上海宝地宝泉房屋经营有限公司成功构建了高效的宿舍管理系统。系统涵盖企业补贴、床位视图等功能',
    icon: '/images/home/customer/baowu-icon.png',
    img: '/images/home/customer/baowu1.png',
    labelList: ['公寓', '宿舍']
  },
  {
    title: '湖北保障房：独立部署，深度定制，全面提升运营效能',
    desc: '通过寓盟管家的系统，湖北省住房保障建设管理有限公司成功应对了复杂的房源管理、财务操作、多样的合同管理以及多经业务管理需求',
    icon: '/images/home/customer/baozu-icon.png',
    img: '/images/home/customer/baozufang1.png',
    labelList: ['保租房']
  },
  {
    title: '联投置业：资源优化，提升城市更新板块运营能力',
    desc: '依托寓盟管家SaaS版，武汉联投置业有限公司进行了独立部署和深度定制。系统解决了复杂的房源管理、财务操作和合同管理需求',
    icon: '/images/home/customer/liantou-icon.png',
    img: '/images/home/customer/liantou1.png',
    labelList: ['保租房']
  },
  {
    title: '北京首钢：智能集成，提升审批与财务管理效率',
    desc: '北京首钢通过独立部署系统，并无缝对接钉钉审批和金蝶系统，显著提升了审批效率和财务管理水平，解决了房源管理',
    icon: '/images/home/customer/shougang-icon.png',
    img: '/images/home/customer/shougang1.png',
    labelList: ['公寓', '宿舍']
  }
  // {
  //   title: '武汉城投：定制运营地图，优化运营流程',
  //   desc: '武汉城投通过系统的轻定制UI和运营地图功能，显著优化了日常运营流程和决策支持，提升了用户体验和管理效率',
  //   icon: '/images/home/customer/chengtou-icon.png',
  //   img: '/images/home/customer/chengtou.png',
  //   labelList: ['公寓']
  // },
  // {
  //   title: '中天集团：动态定价功能，增强市场竞争力',
  //   desc: '中天集团在标准版基础上定制开发了动态定价功能，成功应对租客服务管理、租金收取及报表分析的复杂需求',
  //   icon: '/images/home/customer/zhongtian-icon.png',
  //   img: '/images/home/customer/zhongtian.png',
  //   labelList: ['公寓']
  // }
])

// 轮播图左右箭头所需的样式

const swiperModules = ref([Autoplay, Pagination, Navigation, Scrollbar])
const autoplayParam = reactive({
  delay: 1000,
  disableOnInteraction: false, // 用户操作 swiper 之后，是否禁止 autoplay。默认为 true：停止。
  pauseOnMouseEnter: false // 鼠标置于 swiper 时暂停自动切换，鼠标离开时恢复自动切换，默认 false
})
const swiperOption = ref({
  autoplay: true
})
// 自动轮播配置
const autoConfig = reactive({
  info: {
    delay: 1500, // 间隔时间
    disableOnInteraction: false, // 设置为false，用户交互（滑动）后自动播放不会被禁用，每次交互后都会重新启动
    reverseDirection: false, // 是否反方向轮播
    stopOnLastSlide: false, // 执行到最后
    pauseOnMouseEnter: true // 鼠标输入时暂停
  }
})
</script>

<template>
  <div style="width: 100%; height: 800px">
    <div class="banner1 flex flex-col items-center">
      <h2 class="flex justify-center items-center font-bold mt-70px mb-50px">
        <span class="text-size-60px text-hex-0A87F8">10000+</span>
        <span class="leading-60px text-size-44px font-bold">企业都在使用寓盟管家</span>
      </h2>
      <div class="main-banner">
        <Swiper
          class="swiper"
          :modules="swiperModules"
          :navigation="navigator"
          :loop="true"
          :effect="effect"
          :pagination="{ clickable: true }"
          :autoplay="{ delay: 7000, disableOnInteraction: false }"
        >
          <SwiperSlide v-for="item in customerList" :key="item.id" class="swiper-slide">
            <div class="slide">
              <img :src="item.img" :alt="item.title" class="w-536px rounded-16px" style="height: 380px" />
              <div class="main">
                <div class="title">{{ item.title }}</div>
                <div class="desc">{{ item.desc }}</div>
                <div class="w-422px flex justify-between mt-20px">
                  <NuxtLink to="https://saas.byteox.com/#/login" class="flex justify-center items-center full-btn w-210px h-64px rounded-32px text-24px">
                    <span class="text-white">免费试用</span>
                    <span class="w-36px h-36px bg-white rounded-18px ml-16px" style="display: flex; justify-content: center; align-items: center">
                      <NIcon class="text-hex-0A87F8 leading-40px text-center">
                        <ArrowForward></ArrowForward>
                      </NIcon>
                    </span>
                  </NuxtLink>
                  <NuxtLink class="white-btn w-180px h-64px leading-64px rounded-32px text-24px" style="border: 1px solid #0a87f8">预约演示</NuxtLink>
                </div>
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
  </div>
</template>

<style scoped>
.banner1 {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  overflow: hidden;
  /* width: 100%; */
  height: 100%;
  background: url('/public/images/home/customer/banner.png') no-repeat 0 0;
  background-size: 100% 100%;
}
.swiper-slide {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px 0px rgba(0, 119, 255, 0.1);
}
.slide {
  display: flex;
  width: 100%;
  height: 100%;
  background: #ffffff;
  /* box-shadow: 0px 0px 20px 0px rgba(0,119,255,0.9); */
}
.main-banner {
  width: 1200px;
  height: 380px;
}
.main {
  padding: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.title {
  font-weight: 500;
  font-size: 30px;
  color: #111111;
  line-height: 42px;
}
.desc {
  font-weight: 400;
  font-size: 18px;
  color: #777777;
  line-height: 28px;
  /* margin-top: 24px; */
}

:deep(.swiper-pagination) {
  height: 40px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 40px auto 0;
}
:deep(.swiper-pagination-bullet) {
  border-radius: 2px;
  margin: 0 15px;
  width: 80px !important;
  height: 4px !important;
  background: #e7e7e8;
  display: block;
}
:deep(.swiper-pagination-bullet-active) {
  position: relative;
  width: 100%;
  /* animation: progress-animation 6s linear 0s; */
}
:deep(.swiper-pagination-bullet-active::before) {
  content: '';
  border-radius: 2px;
  width: 100%;
  height: 4px;
  background: #0a87f8;
  position: absolute;
  top: 0;
  left: 0;
  animation: progress-animation 7s linear 0s;
}

@keyframes progress-animation {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
</style>
